


<style type="text/css">
    .block_blog{}
    .block_blog .blog_list{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .block_blog .blog_list_left{
        width: calc(100% - 470px);
    }
    .block_blog .blog_list .blog_list_left .blog_time{
        justify-content: center;
    }
    .block_blog .blog_list .blog_list_left .blog_descript{
        text-align: center;
    }
    .block_blog .blog_list_left .blog_content{
        text-align: center;
        margin-top: 15px;
    }
    .block_blog .blog_iamge img{
        width: 100%;
    }
    .block_blog .blog_list .blog_list_right{
        width: 380px;
        padding-left: 45px;
        border-left: 1px solid #E8E8E1;
    }
    .block_blog .blog_list .blog_list_right h4{
        margin-bottom: 20px;
    }
    .block_blog .blog_list ul{
        
    }
    .block_blog .blog_list ul li{
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 30px;
    }
    .block_blog .blog_list ul li .blog_iamge{
        width: 40%;
    }
    .block_blog .blog_list .blog_name{
        display: block;
        margin-bottom: 5px;
    }
    .block_blog .blog_list .blog_time{
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }
    .block_blog .blog_list ul li .blog_content_right{
        width: 60%;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .block_blog .blog_list .blog_descript{
        text-align: left;
        margin-bottom: 10px;
    }
    
    .block_blog .blog_list .blog_time.show_author span:after{
        content: '·';
        display: inline-block;
        width: 36px;
        text-align: center;
    }
    .block_blog .blog_name{
        font-weight: bold;
    }
    .block_blog .block_blog_more{
        text-align: center;
    }

    @media (max-width: 768px) {
        .block_blog .blog_list{
            flex-wrap: wrap;
        }

        .block_blog .blog_list_left{
            width: 100%;
        }
        .block_blog .blog_list .blog_list_right{
            width: 100%;
            padding: 0;
            border: none;

        }
    }
    @media (max-width: 767px) {
        .block_blog .blog_list ul li{
            margin-bottom: 15px;
        }
    }
</style>
{% stylesheet %}

{% endstylesheet %}
<div class="block_blog">
    <div class="container_wrapper {% if section.settings.full_screen %}full_container_wrapper{% endif %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail|html_content_filter }}</div>{% endif %}
        </div>
        {% endif %}
        <!-- 1fr -->
        <div class="blog_list">

            {% assign blogs_ids = section.blocks | get_array_values: "blog" | get_array_values: "id" | join: "," %}

            {% if section.blocks.size %}
            {% get_blogs ids={blogs_ids} %}
            {% for block in section.blocks %}
            {% assign id = block.blog.id %}
            {% if blogs[id].size > 1 %} 
            {% assign blog = blogs[id] %}
            {% if forloop.first == true %}
            <div class="blog_list_left">
                {% if section.settings.cover_picture %}
                <a class="blog_iamge" href="/blogs/{{ blog.handle }}">
                {%- if blog.image_alt == "" -%}
                    {% assign blog_alt = blog | image_alt:'blog'   %}
                  {%- else -%}
                    {% assign blog_alt = blog.image_alt %}
                  {%- endif -%}
                    <img class="lazyload" data-src="{{blog.src|public_front_asset_url}}" src="{{ 'empty_loading.png' | public_asset_abs_dir_url }}" alt="{{ blog_alt }}">
                </a>
                {% endif %}
                <div class="blog_content">
                    <a class="blog_name " href="/blogs/{{ blog.handle }}">{{ blog.title }}</a>
                    {% if section.settings.date or section.settings.author %}
                    <div class="blog_time  {% if section.settings.author %}show_author{% endif %}">
                        {% if section.settings.date %}
                        <span data-date="{{blog.created_at}}" data-format="YYYY-mm-dd">{{ blog.published_at | date: "%Y-%m-%d" }}</span>
                        {% endif %}
                        {% if section.settings.author %}{{ blog.author_name }}{% endif %}
                    </div>
                    {% endif %}
                    {% if section.settings.blog_descript %}
                    <div class="blog_descript line-clamp2">{{ blog.descript }}</div>
                    {% endif %}
                    {% if section.settings.read_now %}
                    <a class="blog_more" href="/blogs/{{ blog.handle }}">{{section.settings.read_now}}</a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            {% else %}
            {% if forloop.first == true %}
            <div class="blog_list_left">
                {% if section.settings.cover_picture %}
                <a class="blog_iamge" href="javascript:;" data-tips="Please select blog">
                    <img src="{{ 'empty.png' | public_asset_abs_dir_url }}">
                </a>
                {% endif %}
                <div class="blog_content">
                    <a class="blog_name" href="javascript:;"  data-tips="Please select blog">the printing and typesetting industry</a>
                    {% if section.settings.date or section.settings.author %}
                    <div class="blog_time  {% if section.settings.author %}show_author{% endif %}">
                    {% if section.settings.date %}
                    <span>2021-11-17</span>
                    {% endif %}
                    {% if section.settings.author %}author{% endif %}</div>
                    {% endif %}
                    {% if section.settings.blog_descript %}
                    <div class="blog_descript">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    {% endif %}
                    {% if section.settings.read_now %}
                    <a class="blog_more" href="javascript:;"  data-tips="Please select blog">{{section.settings.read_now}}</a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            {% endif %}

            {% endfor %}
            {% else %}
            <div class="blog_list_left">
                {% if section.settings.cover_picture %}
                <a class="blog_iamge" href="javascript:;" data-tips="Please select blog">
                    <img src="{{ 'empty.png' | public_asset_abs_dir_url }}">
                </a>
                {% endif %}
                <div class="blog_content">
                    <a class="blog_name" href="javascript:;"  data-tips="Please select blog">the printing and typesetting industry</a>
                    {% if section.settings.date or section.settings.author %}
                    <div class="blog_time  {% if section.settings.author %}show_author{% endif %}">
                    {% if section.settings.date %}
                    <span>2021-11-17</span>
                    {% endif %}
                    {% if section.settings.author %}author{% endif %}</div>
                    {% endif %}
                    {% if section.settings.blog_descript %}
                    <div class="blog_descript">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    {% endif %}
                    {% if section.settings.read_now %}
                    <a class="blog_more" href="javascript:;"  data-tips="Please select blog">{{section.settings.read_now}}</a>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            <div class="blog_list_right">
                <h4>{{ lang.index.default.latest_posts }}</h4>
                <ul style=" grid-template-columns: repeat({{ section.settings.pc_number  }}, 1fr);">
                    {% if section.blocks.size %}
                    {% get_blogs ids={blogs_ids} %}
                    {% for block in section.blocks %}
                    {% assign id = block.blog.id %}
                    {% if blogs[id].size > 1  %} 
                    {% assign blog = blogs[id] %}
                    {% if forloop.first == true %}
                    {% else %}
                    <li>
                        {% if section.settings.cover_picture %}
                            {%- if blog.image_alt == "" -%}
                                {% assign blog_alt = blog | image_alt:'blog'   %}
                              {%- else -%}
                                {% assign blog_alt = blog.image_alt %}
                              {%- endif -%}
                        <a class="blog_iamge" href="/blogs/{{ blog.handle }}">
                            <img class="lazyload" data-src="{{ blog.src|public_front_asset_url }}" src="{{ 'empty.png' | public_asset_abs_dir_url }}" alt="{{ blog_alt }}">
                        </a>
                        {% endif %}
                        <div class="blog_content_right">
                            <a class="blog_name " href="/blogs/{{ blog.handle }}">{{ blog.title }}</a>
                            {% if section.settings.date or section.settings.author %}
                            <div class="blog_time  {% if section.settings.author %}show_author{% endif %}">
                                {% if section.settings.date %}
                                <span data-date="{{blog.created_at}}" data-format="YYYY-mm-dd">{{ blog.published_at | date: "%Y-%m-%d" }}</span>
                                {% endif %}
                                {% if section.settings.author %}{{ blog.author_name }}{% endif %}
                            </div>
                            {% endif %}
                            {% if section.settings.blog_descript %}
                            <div class="blog_descript line-clamp2">{{ blog.descript }}</div>
                            {% endif %}
                            {% if section.settings.read_now %}
                            <a class="blog_more" href="/blogs/{{ blog.handle }}">{{section.settings.read_now}}</a>
                            {% endif %}
                        </div>
                    </li>
                    {% endif %}
                    {% else %}
                    {% if forloop.first == false %}
                    <li>
                        {% if section.settings.cover_picture %}
                        <a class="blog_iamge" href="javascript:;" data-tips="Please select blog">
                            <img src="{{ 'empty.png' | public_asset_abs_dir_url }}">
                        </a>
                        {% endif %}
                        <div class="blog_list_right_item" style="padding-left: 45px;">
                            <a class="blog_name" href="javascript:;"  data-tips="Please select blog">the printing and typesetting industry</a>
                            {% if section.settings.date or section.settings.author %}
                            <div class="blog_time {% if section.settings.author %}show_author{% endif %}">{% if section.settings.date %}<span>2021-11-17</span>{% endif %}{% if section.settings.author %}author{% endif %}</div>
                            {% endif %}
                            {% if section.settings.blog_descript %}
                            <div class="blog_descript">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                            {% endif %}
                            {% if section.settings.read_now %}
                            <a class="blog_more" href="javascript:;"  data-tips="Please select blog">{{section.settings.read_now}}</a>
                            {% endif %}
                        </div>
                    </li>
                    {% endif %}
                    {% endif %}

                    {% endfor %}
                    {% else %}
                    {% for i in (1..section.settings.pc_number) %}
                    <li>
                        {% if section.settings.cover_picture %}
                        <a class="blog_iamge" href="javascript:;" data-tips="Please select blog">
                          <img src="{{ 'empty.png' | public_asset_abs_dir_url }}">
                        </a>
                        {% endif %}
                        <div class="blog_list_right_item" style="padding-left: 45px;">
                            <a class="blog_name" href="javascript:;"  data-tips="Please select blog">the printing and typesetting industry</a>
                            {% if section.settings.date or section.settings.author %}
                            <div class="blog_time {% if section.settings.author %}show_author{% endif %}">
                            {% if section.settings.date %}<span>2021-11-17</span>{% endif %}
                            {% if section.settings.author %}author{% endif %}</div>
                            {% endif %}
                            {% if section.settings.blog_descript %}
                            <div class="blog_descript">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                            {% endif %}
                            {% if section.settings.read_now %}
                            <a class="blog_more" href="javascript:;"  data-tips="Please select blog">{{section.settings.read_now}}</a>
                            {% endif %}
                        </div>
                    </li>
                    {% endfor %}
                    {% endif %}
                </ul>
            </div>
        </div>
        {% if section.settings.more_text != ""%}
        <div class="block_blog_more"><a class="secondary_btn" href="{{ section.settings.link |  setUrlDataFrom:data_from}}">{{ section.settings.more_text }}</a></div>
        {% endif %}
    </div>
</div>

{% schema %}
{
	"tag": "section",
	"class": "block_blogs",
	"is_global": false,
	"name": {
		"zh_CN": "多选博客",
		"en_US": "Multiple Blogs"
	},
	"max_blocks": 10,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "From our blog"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "Detail"
		},
		{
			"type": "card_switch",
			"id": "date",
			"label": {
				"zh_CN": "显示日期",
				"en_US": "Show date"
			},
			"default": true
		},
		{
			"type": "card_switch",
			"id": "author",
			"label": {
				"zh_CN": "显示作者",
				"en_US": "Show author"
			},
			"default": "true"
		},
		{
			"type": "card_switch",
			"id": "cover_picture",
			"label": {
				"zh_CN": "显示封面图片",
				"en_US": "Show cover image"
			},
			"default": true
		},
		{
			"type": "card_switch",
			"id": "blog_descript",
			"label": {
				"zh_CN": "显示简短描述",
				"en_US": "Show a short description"
			}
		},
		{
			"type": "card_input",
			"id": "read_now",
			"label": {
				"zh_CN": "阅读全文文案",
				"en_US": "Read the full text"
			}
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "查看更多文案",
				"en_US": "Text of view more"
			},
			"id": "more_text"
		},
        {
			"type": "card_page_link",
			"label": {
				"zh_CN": "查看更多链接",
				"en_US": "See more links"
			},
			"default": {
				"type": "14",
				"title": "",
				"url": "/blogs"
			},
			"id": "link"
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "博客",
				"en_US": "Blog"
			},
			"type": "blogs-items",
			"settings": [
				{
					"type": "card_blog",
					"id": "blog",
					"label": {
						"zh_CN": "博客",
						"en_US": "Blog"
					},
					"default": {
						"id": "",
						"title": ""
					}
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Blog",
			"detail": "",
			"date": true,
			"author": true,
			"cover_picture": true,
			"blog_descript": false,
			"read_now": "",
			"more_text": "",
            "link": {
				"type": "14",
				"title": "",
				"url": "/blogs"
			}
		},
		"blocks": [
			{
				"blog": {
					"id": "",
					"title": ""
				},
				"block_type": "blogs-items"
			},
			{
				"blog": {
					"id": "",
					"title": ""
				},
				"block_type": "blogs-items"
			},
			{
				"blog": {
					"id": "",
					"title": ""
				},
				"block_type": "blogs-items"
			}
		]
	}
}
{% endschema %}